<script setup>
import { ref, onMounted, computed, watch, inject, toRaw } from 'vue'
import VersionObjectEditor from './VersionObjectEditor.vue'
import _ from 'lodash'

const props = defineProps({
    value: {
        type: Object,
        default: () => {}
    }
})
const ids = inject('ids')
const keyLength = ref(0)

const properties = computed(() => {
    let items = []
    for (const key in props.value) {
        const value = props.value[key]
        keyLength.value = Math.max(keyLength.value, key.length)
        items.push({
            key,
            value: value
        })
    }
    return items
})
</script>

<template>
    <div>
        <div v-for="prop in properties">
            <div class="prop">
                <div class="prop-key" :style="{ width: keyLength * 16 + 'px' }">
                    {{ prop.key }}:
                </div>
                <div class="prop-value">
                    <VersionObjectEditor
                        class="prop-value-current"
                        v-if="_.isObject(prop.value)"
                        :value="prop.value" />
                    <div class="prop-value-current" v-else-if="_.isArray(prop.value)">
                        <VersionObjectEditor v-for="item in prop.value" :value="item" />
                    </div>
                    <div class="prop-value-current" v-else>
                        {{ prop.value }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.prop {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.prop-key {
    /* width: 100px; */
    font-size: 16px;
}

.prop-value {
    flex: 1;
}
.prop-value-current {
    padding: 0px 8px;
    /* background-color: green; */
}
.prop-versions {
    /* background-color: aqua; */
    padding: 0px 8px;
}

.xx {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
